<template>
	<view class="page">
		<view class="bg-w pd30 mb20">
			<view class="ft16 ftw600 text-main mb30">商品信息</view>
			
			<view class="form-item">
				<view class="label">商品标题<text class="text-theme">*</text></view>
				<input class="input" v-model="goodsForm.title" placeholder="请输入商品标题" />
			</view>
			
			<view class="form-item">
				<view class="label">商品分类<text class="text-theme">*</text></view>
				<picker @change="bindPickerChange" :value="categoryIndex" :range="categoryList" range-key="name">
					<view class="picker">
						{{categoryIndex > -1 ? categoryList[categoryIndex].name : '请选择商品分类'}}
					</view>
				</picker>
			</view>
			
			<view class="form-item">
				<view class="label">商品价格<text class="text-theme">*</text></view>
				<input class="input" v-model="goodsForm.price" type="digit" placeholder="请输入商品价格" />
			</view>
			
			<view class="form-item">
				<view class="label">分销佣金比例<text class="text-theme">*</text></view>
				<input class="input" v-model="goodsForm.commission_rate" type="digit" placeholder="请输入分销佣金比例(1-100)" />
				<view class="tip">设置分销员销售此商品可获得的佣金比例</view>
			</view>
			
			<view class="form-item">
				<view class="label">商品图片<text class="text-theme">*</text></view>
				<view class="image-list">
					<view v-for="(item, index) in goodsForm.images" :key="index" class="image-item">
						<image :src="item" mode="aspectFill"></image>
						<view class="delete-btn" @click="deleteImage(index)">×</view>
					</view>
			<view v-if="goodsForm.images.length < 9" class="add-image" @click="chooseImage">
				<!-- 使用图标组件 -->
				<app-icon name="+" type="text" size="60" color="#ccc" />
			</view>
				</view>
			</view>
			
			<view class="form-item">
				<view class="label">商品描述<text class="text-theme">*</text></view>
				<textarea class="textarea" v-model="goodsForm.description" placeholder="请输入商品描述" />
			</view>
			
			<view class="form-item">
				<view class="label">联系方式<text class="text-theme">*</text></view>
				<input class="input" v-model="goodsForm.contact" placeholder="请输入联系方式" />
			</view>
			
			<view class="form-item">
				<view class="label">服务区域</view>
				<input class="input" v-model="goodsForm.area" placeholder="请输入服务区域（选填）" />
			</view>
		</view>
		
		<view class="bg-w pd30 mb20">
			<view class="ft16 ftw600 text-main mb30">分销设置</view>
			
			<view class="switch-item">
				<view class="label">开启分销</view>
				<switch :checked="goodsForm.enable_distribution" @change="switchDistribution" />
			</view>
			
			<view v-if="goodsForm.enable_distribution" class="form-item">
				<view class="label">二级分销比例</view>
				<input class="input" v-model="goodsForm.second_commission_rate" type="digit" placeholder="请输入二级分销佣金比例" />
				<view class="tip">设置分销员推荐其他分销员可获得的二级佣金比例</view>
			</view>
		</view>
		
		<view class="pd30">
			<button class="btn-main ftw600" @click="submitGoods">发布商品</button>
		</view>
		
		<unio2o-login @cancel="loginAlert = false" @yes="loginAlert = false" :show="loginAlert"></unio2o-login>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
	data() {
		return {
			loginAlert: false,
			categoryIndex: -1,
			categoryList: [
				{ id: 1, name: '美食餐饮' },
				{ id: 2, name: '酒店住宿' },
				{ id: 3, name: '休闲娱乐' },
				{ id: 4, name: '生活服务' },
				{ id: 5, name: '教育培训' },
				{ id: 6, name: '美容美发' },
				{ id: 7, name: '健身运动' },
				{ id: 8, name: '医疗健康' },
				{ id: 9, name: '数码电子' },
				{ id: 10, name: '服装配饰' }
			],
			goodsForm: {
				title: '',
				category_id: '',
				price: '',
				commission_rate: '',
				second_commission_rate: '',
				images: [],
				description: '',
				contact: '',
				area: '',
				enable_distribution: true
			}
		};
	},
	computed: {
		...mapState(['memberInfo']),
		isLogin() {
			return this.memberInfo == null ? false : true;
		}
	},
	onLoad() {
		if (!this.isLogin) {
			this.loginAlert = true;
		}
	},
	methods: {
		...mapMutations(['setMember', 'logout']),
		
		bindPickerChange(e) {
			this.categoryIndex = e.detail.value;
			this.goodsForm.category_id = this.categoryList[e.detail.value].id;
		},
		
		switchDistribution(e) {
			this.goodsForm.enable_distribution = e.detail.value;
		},
		
		chooseImage() {
			uni.chooseImage({
				count: 9 - this.goodsForm.images.length,
				success: (res) => {
					this.goodsForm.images = this.goodsForm.images.concat(res.tempFilePaths);
				}
			});
		},
		
		deleteImage(index) {
			this.goodsForm.images.splice(index, 1);
		},
		
		validateForm() {
			if (!this.goodsForm.title.trim()) {
				uni.showToast({ title: '请输入商品标题', icon: 'none' });
				return false;
			}
			if (!this.goodsForm.category_id) {
				uni.showToast({ title: '请选择商品分类', icon: 'none' });
				return false;
			}
			if (!this.goodsForm.price || this.goodsForm.price <= 0) {
				uni.showToast({ title: '请输入正确的商品价格', icon: 'none' });
				return false;
			}
			if (!this.goodsForm.commission_rate || this.goodsForm.commission_rate < 1 || this.goodsForm.commission_rate > 100) {
				uni.showToast({ title: '请输入正确的佣金比例(1-100)', icon: 'none' });
				return false;
			}
			if (this.goodsForm.images.length === 0) {
				uni.showToast({ title: '请上传商品图片', icon: 'none' });
				return false;
			}
			if (!this.goodsForm.description.trim()) {
				uni.showToast({ title: '请输入商品描述', icon: 'none' });
				return false;
			}
			if (!this.goodsForm.contact.trim()) {
				uni.showToast({ title: '请输入联系方式', icon: 'none' });
				return false;
			}
			return true;
		},
		
		submitGoods() {
			if (!this.isLogin) {
				this.loginAlert = true;
				return;
			}
			
			if (!this.validateForm()) {
				return;
			}
			
			uni.showLoading({ title: '发布中...' });
			
			// 模拟API调用
			setTimeout(() => {
				uni.hideLoading();
				uni.showToast({ title: '发布成功', icon: 'success' });
				
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}, 2000);
		}
	}
};
</script>

<style>
.form-item {
	margin-bottom: 30rpx;
}

.label {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
}

.input {
	width: 100%;
	height: 80rpx;
	background: #f5f5f5;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
}

.textarea {
	width: 100%;
	height: 200rpx;
	background: #f5f5f5;
	border-radius: 8rpx;
	padding: 20rpx;
	font-size: 28rpx;
}

.picker {
	width: 100%;
	height: 80rpx;
	background: #f5f5f5;
	border-radius: 8rpx;
	padding: 0 20rpx;
	line-height: 80rpx;
	font-size: 28rpx;
	color: #333;
}

.tip {
	font-size: 24rpx;
	color: #999;
	margin-top: 10rpx;
}

.image-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.image-item, .add-image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 8rpx;
	position: relative;
}

.image-item image {
	width: 100%;
	height: 100%;
	border-radius: 8rpx;
}

.add-image {
	border: 2rpx dashed #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 60rpx;
	color: #999;
	background: #f5f5f5;
}

.delete-btn {
	position: absolute;
	top: -10rpx;
	right: -10rpx;
	width: 40rpx;
	height: 40rpx;
	background: #ff4757;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
}

.switch-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 30rpx;
}

.switch-item .label {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 0;
}
</style>